<template>
  <div>
    <el-card class="card">
      <div slot="header">
        <span> 商品列表</span>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="商品名称" width="180">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.date }}</span>
          </template>
        </el-table-column>
        <el-table-column label="所属分类" width="180"></el-table-column>
        <el-table-column label="商品价格" width="180"></el-table-column>
        <el-table-column label="商品图片" width="180"></el-table-column>
        <el-table-column label="商品描述" width="180"></el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="nation-box">
        <el-pagination
          background=""
          class="nation"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[3, 5]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
  <!-- 
currentPage    当前页码
pageSize       每页条数
name           商品名称
category       商品分类
--></template>

<script>
// 解构获取商品列表接口
import { goodsListReq } from "@/api/goods";
export default {
  data() {
    return {
      tableData: [],
      formData: {
        name: "",
        category: "",
      },
      currentPage: 1,
      // 每页条数
      pageSize: 3,
      total: 0,
      // 编辑弹窗显示隐藏
      dialogFormVisible: false,
    };
  },
  methods: {
    //获取数据函数
   async getData() {
      // 提取数据
      let currentPage = this.currentPage;
      let pageSize = this.pageSize;
      //发送请求
      let res =await goodsListReq({
        currentPage,
        pageSize
      })
       //解构数据
       let {total,data}=res.data
       //数据赋值
       this.total=total
       this.tableData=data
    },

    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    // 页码
    handleSizeChange(val) {
      // 1 获取当前每页 条数
      this.pageSize = val;
      // 2 拉去数据
      this.getData();
    },

    handleCurrentChange(val) {
      // 1 获取当前页面 赋值
      this.currentPage = val;
      // 2 发请求
      this.getData();
    },

    
  },

  //初始化发请求
  created(){
    this.getData()
    console.log("this.tableData :>> ", this.tableData);
  }
};
</script>


<style lang="scss" scoped>
</style>